import { Modal, Spin, message } from 'antd';
import React, { useState } from 'react';
import type { passwordParamsType } from '@/services/user';
import { changePassword } from '@/services/user';
import LoginFrom from '@/components/Login';
import { any_md5 } from '@/utils/md5';

const { Mobile, Captcha, Submit, Password } = LoginFrom;

interface PasswordProps {
  system: 'cm' | 'bk' | 'ls' | 'gs';
  mobile: string;
  modalVisible: boolean;
  onCancel: () => void;
}

const PasswordModal: React.FC<PasswordProps> = (props) => {
  const { system, mobile, modalVisible, onCancel } = props;
  const [submitting, setSubmitting] = useState<boolean>(false);

  const setSubmit = async (values: any) => {
    setSubmitting(true);
    const par: passwordParamsType = {
      mobile: values.phone,
      smsCode: values.smsCode,
      psw: any_md5(values.password, values.phone),
    };
    const res = await changePassword(par, system);
    setSubmitting(false);
    if (res.success) {
      onCancel();
    } else {
      message.error(res.errMsg || '修改失败！');
    }
  };

  return (
    <Modal
      destroyOnClose
      title="修改登录密码"
      visible={modalVisible}
      width={600}
      footer={null}
      onCancel={onCancel}
    >
      <Spin tip="稍等..." spinning={submitting}>
        <div style={{ maxWidth: '400px', margin: '0px auto' }}>
          <LoginFrom onSubmit={setSubmit}>
            <Mobile
              name="phone"
              defaultValue={mobile}
              placeholder="手机号"
              rules={[
                {
                  required: true,
                  message: '请输入手机号！',
                },
                {
                  pattern: /^1\d{10}$/,
                  message: '手机号格式错误！',
                },
              ]}
            />
            <Password
              id="password"
              name="password"
              placeholder="输入密码"
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
                {
                  pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,30}$/,
                  message: '密码必须为4到30位大小写字母和数字的组合,支持特殊字符',
                },
              ]}
            />
            <Password
              id="confirm"
              name="confirm"
              placeholder="再次输入密码"
              dependencies={['password']}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入不一致!'));
                  },
                }),
              ]}
            />
            <Captcha
              name="smsCode"
              placeholder="验证码"
              countDown={60}
              getCaptchaButtonText=""
              getCaptchaSecondText="秒"
              rules={[
                {
                  required: true,
                  message: '请输入验证码！',
                },
              ]}
            />
            <Submit loading={submitting}>确 认 修改</Submit>
          </LoginFrom>
        </div>
      </Spin>
    </Modal>
  );
};

export default PasswordModal;
